<!--
 - Author : wang885298.
 - Date   : 2018/7/24.
 - File   : index.演示页面
 -->

<template>
  <div class="main">
    <!--锚点栏-->
    <div class="anchor-box">
      <div class="anchor-items">
        <div class="central-region" id="central-region">
          <div class="c-main">
            <div :class="[index===checkAllObj.centerChoose?'on':'','center-list']" v-for="(center,index) in
            centerList" @click="setMapCenter(center,index)">
              {{center.mapCenterName}}
            </div>
          </div>
        </div>
      </div>
      <div class="anchor anchor-box-left">
        <span class="sj"></span>
        <div :class="[{'active':item.active},'anchor-item','its']" @click="toggleType(item,index)"
             v-for="(item, index) in typeList">
          <span class="corner"></span>
          <span class="name">
            <img :src="item.icon" alt="">
          </span>
        </div>
      </div>
      <div class="anchor anchor-box-right" ref="anchor" :style="{width: 125 * (anchorLength) + 'px'}">
        <span class="sj"></span>
        <div :class="[{'active':checkAllObj.checked},'anchor-item']" @click="toggleChoose(menuList,'','all')" id="all">
          <div class="zoom" style="height:0;top: 0;left: 0;" v-show="checkAllObj.checked" @click.stop>
            <el-checkbox v-model="checkAllObj.checkName" style="border-bottom: 1px solid #fff"
                         @change="showAllName">
              显示名称
            </el-checkbox>
            <el-checkbox v-model="checkAllObj.checkScale" @change="checkAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="checkAllObj.scaleArr" @change="checkedChange">
              <el-checkbox v-for="scaleAll in scaleList" :label="scaleAll.detailCode" :key="scaleAll.detailCode">{{
                scaleAll.detailName}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="hide arrow-s" id="allTxt" v-show="checkAllObj.checked" @click.stop="pop('all', 'allTxt')"></div>
          <span class="corner"></span>
          <span class="total">全部</span>
        </div>
        <div class="rightIconGo" @click="iconGo('R')"></div>
        <div class="leftIconGo" @click="iconGo('L')"></div>
        <div class="anchor-overflow" ref="anchorOverflow" style="padding-top: 0px">
          <div class="anchor-scroll" ref="anchorScroll" :style="{width: 90 * (menuList.length + 2) + 'px'}">
            <div :class="[{'active':item.active},'anchor-item']" v-for="(item, index) in menuList"
                 @click="toggleChoose(menuList,item,'single')" :id="item.anchorTypeId">
              <div class="zoom" style="height:0;top: 0;left: 0;" v-show="item.active" @click.stop>
                <el-checkbox v-model="item.checkName" @change="showName(item)" style="border-bottom: 1px solid #fff">
                  显示名称
                </el-checkbox>
                <el-checkbox v-model="item.checkAll" @change="handleCheckAllChange(item)">全选</el-checkbox>
                <el-checkbox-group v-model="item.checkedScale" @change="handleCheckedChange(item)">
                  <el-checkbox :label="scale.detailCode" v-for="(scale,n) in item.scaleList" :key="scale.detailCode">
                    {{scale.detailName}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="hide arrow-s" :id="'txt'+item.anchorTypeId" v-show="item.active"
                   @click.stop="pop(item.anchorTypeId,'txt'+item.anchorTypeId)">
              </div>
              <span class="corner"></span>
              <img :src="item.anchorIconUrl" width="33px" height="29px" alt="">
              <span class="names">{{item.anchorTypeName}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="anchor-zone">
      <div class="anchor">
        <span class="sj"></span>
        <div :class="[{'active':isChoose},'anchor-item','its']" @click="togglePay">
          <span class="corner"></span>
          <span class="name">
            <img src="../assets/images/mapIcon/select.png" alt="">
          </span>
        </div>
      </div>
    </div>
    <!--框选列表显示区域-->
    <div class="area" id="area">
      <el-tabs v-model="activeName2" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">
          <div class="areaList">
            <div class="areaList-item">
              <div class="img"></div>
              <div class="content">
                <h1>荔波县公安局佳荣派出所</h1>
                <p class="intro">贵州省黔南布依族苗族自治州荔波县佳荣镇政府附近</p>
                <p>电话：(0854)3773110</p>
              </div>
            </div>
            <div class="areaList-item">
              <div class="img"></div>
              <div class="content">
                <h1>荔波县公安局佳荣派出所</h1>
                <p class="intro">贵州省黔南布依族苗族自治州荔波县佳荣镇政府附近</p>
                <p>电话：(0854)3773110</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </div>
    <!--展示关联窗口-->
    <div class="infoWindow" id="infoWindow"
         :style="{width:infoWindow.width, height: infoWindow.height,marginLeft: infoWindow.marginLeft,marginTop: infoWindow.marginTop}">
      <div class="infoWindow-close" @click="closeInfoWindow">X</div>
      <iframe class="infoWindow-content" :src="infoWindow.url"></iframe>
    </div>
    <!--地图区域-2D-->
    <div id="container"></div>
    <!--地图区域-3D-->
    <div id="container3D"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        gdMap: null,
        gdMap3D: null,
        map: null,
        marker: {},
        mapStyle: 'amap://styles/d3fc11529eaf1d820d9d1d79da8a104c', // 设置地图的显示样式
        activeName2: 'first',
        centerMarker: {},//设置中心点marker
        pointList: [],//后台获取的打点数据
        isChoose: false,//是否点击了框选区域
        menuList: [],
        menu2dList: [],//2D锚点类型列表
        menu3dList: [],//3D锚点类型列表
        typeList: [{
          type: 'center',
          icon: require('../assets/images/mapIcon/center.png')
        }, {
          type: '3D',
          icon: require('../assets/images/mapIcon/3D.png')
        }],//3d和中心点
        centerList: [],//接口获取的中心点列表
        checked: true,//是否显示名称
        radio2: null,
        mouseTool: null,//鼠标功能
        isMouse: false,
        ChooseAllType: '2D',
        ruleLogin: {
          userName: '15806034686',
          pass: '123456',
          code: 'asdf'
        },
        anchorLength: 6,
        anchorScroll: '',
        goTime: '',
        goPix: 39,
        infoWindow: {//展示关联窗口
          width: '',
          height: '',
          marginLeft: '',
          marginTop: '',
          url: ''
        },
        tmpList: [], //点击锚点类型后的锚点类型状态列表
        scaleList: [], //比例尺
        checkAllObj: {
          checked: true,
          checkName: true,
          checkScale: false,
          scaleArr: [],
          centerChoose: ''
        },
        checkAllObj2D: {
          checked: true,
          checkName: true,
          checkScale: false,
          scaleArr: [],
          centerChoose: ''
        },
        checkAllObj3D: {
          checked: true,
          checkName: true,
          checkScale: false,
          scaleArr: [],
          centerChoose: ''
        },
        oldLngLat: null,//旧的地图范围
        oldLngLat2D: null,//旧的2D地图范围
        oldLngLat3D: null,//旧的3D地图范围
        nowLngLat: {},//当前地图范围
        currentMarkerIdList: [],
        current2DMarkerIdList: [],
        current3DMarkerIdList: [],
        currentMapScale: '',//当前地图比例
        iconList: [],//图标url列表
        iconList2D: [],//2D图标url列表
        iconList3D: [],//3D图标url列表
        totalPointList: [],//获取到地图上所有的点
        defaultCenter: {},
        clusterSet: {},
        clusterSet2D: {},
        clusterSet3D: {},
        throttleEventHandle: ''
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      /**
       * 页面初始化数据
       */
      async init () {
       await this.$request.loginPost(this.ruleLogin.userName, this.ruleLogin.pass, '01').then(res => {
          window.localStorage.setItem('accessTokenKey', res.accessTokenKey)
          window.localStorage.setItem('accessToken', res.accessToken)
        })
        this.checkAllObj = this.checkAllObj2D
        this.oldLngLat = this.oldLngLat2D
        this.gdMap = new AMap.Map('container', {
          zoom: 14,//级别
          resizeEnable: true,
          mapStyle: this.mapStyle,
          viewMode: '2D' // 不使用3D视图
        })
        this.gdMap3D = new AMap.Map('container3D', {
          resizeEnable: true,
          rotateEnable: true,
          pitchEnable: true,
          zoom: 14,
          pitch: 80,
          rotation: -15,
          viewMode: '3D',//开启3D视图,默认为关闭
          buildingAnimation: true,//楼块出现是否带动画
          mapStyle: this.mapStyle,
          expandZoomRange: true,
          zooms: [3, 20]
        })
        this.map = this.gdMap
        await this.getCeneterList()
        this.currentMarkerIdList = this.current2DMarkerIdList
        this.throttleEventHandle = this.$utils.throttle(this.getNowPoint, 300)
        this.getAnchorTypeList()
        this.gadMap(this.gdMap)
        this.gadMap(this.gdMap3D)
      },
      /**
       * 缩放拖拽高德地图加载锚点
       */
      gadMap (ctx) {
        ctx.on('moveend', () => {
          this.throttleEventHandle(ctx)
        })
        ctx.on('resize', () => {
          this.throttleEventHandle(ctx)
        })
        ctx.on('zoomend', () => {
          this.throttleEventHandle(ctx)
        })
      },
      /**
       * 获取中心点列表
       */
      getCeneterList () {//获取高德地图上的2d，3d中心点
        return this.$request.getMapCenterList({}).then((response) => {
          console.log('中心点列表获取', response)
          this.centerList = response
          this.centerList.forEach(v => {
            if (v.isDefault === 'T') {
              this.defaultCenter = v
              if (this.defaultCenter.mapCenterLocationType === '01') { //根据经纬度获取中心点
                let center = [parseFloat(this.defaultCenter.longitude), parseFloat(this.defaultCenter.latitude)]
                this.map.setZoomAndCenter(14, center)
                this.gdMap3D.setZoomAndCenter(14, center)
              } else { //根据城市名获取中心点
                this.map.setCity(this.defaultCenter.cityName)
                this.map.setZoom(14)
                this.gdMap3D.setCity(this.defaultCenter.cityName)
              }
              this.marker = new AMap.Marker()
              this.centerMarker = new AMap.Marker()
              this.marker.setMap(this.map)
            }
          })
        })
      },
      /**
       * 获取锚点类型列表2d/3d,比例尺
       */
      async getAnchorTypeList () {
        //获取比例尺
        await this.$request.getScaleList({dictCode: 'MAP_SCALE'}).then((response) => {
          this.scaleList = response
        })
        let _renderCluserMarker = (content) => {
          let contentHtml = `<div style="width: 72px; height: 72px; background-image: url(${content.markers[0].getIcon()}); text-align: center; line-height: 32px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;">
                                 <p style="position: absolute; margin-top: 18px;width: 72px;text-align: center;color: #fff;font-size: 15px;">${content.count}</p></div>`
          content.marker.setContent(contentHtml)
        }
        //获取2d锚点类型
        this.$request.getAnchorType2DList({}).then((response) => {
          for (let i = 0; i < response.recordList.length; i++) {
            this.$set(response.recordList[i], 'scaleList', this.scaleList)
            this.$set(response.recordList[i], 'checkAll', false)
            this.$set(response.recordList[i], 'checkedScale', [])
            this.$set(response.recordList[i], 'checkName', true)
            this.iconList2D[response.recordList[i].anchorTypeId] = response.recordList[i].anchorIconUrl + '&status=' + '030'
            if (this.checkAllObj2D.checked) this.$set(response.recordList[i], 'active', true)
//            let styles = [{
//              url: response.recordList[i].anchorIconUrl,
//              size: new AMap.Size(32, 32),
//              offset: new AMap.Pixel(-16, -16)
//            }]
            this.clusterSet2D[response.recordList[i].anchorTypeId] = new AMap.MarkerClusterer(this.gdMap, [], {
              renderCluserMarker: _renderCluserMarker,
              gridSize: 80
            })
          }
          this.clusterSet = this.clusterSet2D
          this.iconList = this.iconList2D
          this.menu2dList = response.recordList
          this.menuList = this.menu2dList
          if (this.checkAllObj.checked) this.tmpList = this.menu2dList
          console.log('锚点类型获取', this.menuList)
          this.getNowPoint(this.gdMap)
        })
        //获取3d锚点类型
        this.$request.getAnchorType3DList({}).then((response) => {
          for (let i = 0; i < response.recordList.length; i++) {
            this.$set(response.recordList[i], 'scaleList', this.scaleList)
            this.$set(response.recordList[i], 'checkAll', false)
            this.$set(response.recordList[i], 'checkedScale', [])
            this.$set(response.recordList[i], 'checkName', true)
            this.iconList3D[response.recordList[i].anchorTypeId] = response.recordList[i].anchorIconUrl + '&status=' + '030'
            if (this.checkAllObj3D.checked) this.$set(response.recordList[i], 'active', true)
//            let styles = [{
//              url: response.recordList[i].anchorIconUrl,
//              size: new AMap.Size(32, 32),
//              offset: new AMap.Pixel(-16, -16)
//            }]
            this.clusterSet3D[response.recordList[i].anchorTypeId] = new AMap.MarkerClusterer(this.gdMap3D, [], {
              renderCluserMarker: _renderCluserMarker,
              gridSize: 80
            })
          }
          console.log('锚点类型获取3d', response)
          this.menu3dList = response.recordList
        })
      },
      /**
       * 获取指定区域的锚点
       */
      pointGetPost(mapType, item) {
        let params = {
          actualMapScale: this.currentMapScale,
          anchorTypeId: item.anchorTypeId,
          isMapModel2d: mapType,
          mapScaleList: item.checkedScale,
          nowLongitudeStart: this.nowLngLat.southwest.lng,
          nowLatitudeStart: this.nowLngLat.southwest.lat,
          nowLongitudeEnd: this.nowLngLat.northeast.lng,
          nowLatitudeEnd: this.nowLngLat.northeast.lat,
          oldLongitudeStart: this.oldLngLat && this.oldLngLat.southwest.lng,
          oldLatitudeStart: this.oldLngLat && this.oldLngLat.southwest.lat,
          oldLongitudeEnd: this.oldLngLat && this.oldLngLat.northeast.lng,
          oldLatitudeEnd: this.oldLngLat && this.oldLngLat.northeast.lat,
        }
        this.$request.getPointList(params).then((response) => {
          console.log(response, '!!!!!!!!!!!!!!!!!!!!!!!!!!!~~~~~')
          this.setAnchors(response.resultList, item)
        })
      },
      /**
       * 获取当前所在区域的锚点
       */
      getNowPoint (ctx, all) {
        let zoom //获取的当前地图级别
        let showTypeList = [] //要显示的锚点类型
        let list = this.tmpList
        console.log(this.tmpList, 'this.tmpList~~~~~~~~')
        list.forEach(function (value, index, list) {
          if (list[index].active === true) {
            showTypeList.push(list[index])
          }
        })
        zoom = parseInt(ctx.getZoom())
        this.currentMapScale = this.$utils.ScaleConversion[zoom]
        if (ctx === this.gdMap) {
          this.nowLngLat = ctx.getBounds()
          if (all) {
            this.oldLngLat = null
            this.pointGetPost('T', all)
          } else {
            for (let i = 0; i < showTypeList.length; i++) {
              this.pointGetPost('T', showTypeList[i])
            }
          }
        } else {
          this.nowLngLat = ctx.getBounds()
          this.nowLngLat = this.$utils.covertToRect(this.nowLngLat.bounds[0], this.nowLngLat.bounds[1], this.nowLngLat.bounds[2], this.nowLngLat.bounds[3])
          if (all) {
            this.oldLngLat = null
            this.pointGetPost('F', all)
          } else {
            for (let i = 0; i < showTypeList.length; i++) {
              this.pointGetPost('F', showTypeList[i])
            }
          }
        }
      },
      /**
       * 高德地图添加地图各锚点功能
       */
      setAnchors (pointList, anchorTypeItem) {
        console.time('~~~~~~~~~~~~')
        let tmpMarkers = []
        let tmpIdList = []
        pointList.forEach((item) => {
          if (this.currentMarkerIdList.indexOf(item.anchorId) === -1) {
            tmpMarkers.push(this.tmpSet(item, anchorTypeItem))
            tmpIdList.push(item.anchorId)
          }
        })
        this.currentMarkerIdList = this.currentMarkerIdList.concat(tmpIdList)
        this.oldLngLat = this.nowLngLat
        tmpMarkers.length&&this.clusterSet[pointList[0].anchorTypeId].addMarkers(tmpMarkers)
        this.hidePoint(anchorTypeItem)
      },
      tmpSet(item, anchorItem) {
//        let tmpMarkers = []
//          let icon = new AMap.Icon({//锚点样式
//            image: this.iconList[item.anchorTypeId],
//            size: new AMap.Size(72, 72),
//            imageSize: new AMap.Size(72, 72)
//          })
//          let position = [parseFloat(item.longitude), parseFloat(item.latitude)]//锚点坐标
        let extData = {
          type: item.anchorTypeId,
          anchorId: item.anchorId,
          mapScale: item.mapScale,
          anchorName: item.anchorName,
          relationBusinessData: item.relationBusinessData,
          relation: item.relation
        }//锚点属性
        let marker = new AMap.Marker({//地图上打点锚点
          icon: this.iconList[item.anchorTypeId],
          position: [item.longitude, item.latitude],
          extData: extData,//给标记点添加type属性
        })
        marker.setLabel({
          offset: new AMap.Pixel(-16, 50),//修改label相对于maker的位置
          content: anchorItem.checkName ? (item.anchorName || '未命名') : ''
        })
//          this.currentMarkerIdList.push(item.anchorId)
        marker.on('mouseup', e => { //点击标注点的坐标显示弹窗
          // window.content.typeUrl('ie', '003161', '智慧工业园区')
           if (this.isMouse === true) {//去除框选区域功能样式
             this.mouseTool.close(true)
             this.isChoose = false
           }
          let relationBusinessData = e.target.getExtData().relationBusinessData
          let url = anchorItem.entranceUrl.replace('${id}', relationBusinessData)
          if (anchorItem.entranceIsPopUp === 'T') {
            window.open(url)
          } else {
            document.getElementById('area').style.display = 'none'
            document.getElementById('infoWindow').style.display = 'block'
            if (anchorItem.entranceWindowType === '02') {
              this.infoWindow.width = anchorItem.entranceWindowPercent + '%'
              this.infoWindow.height = anchorItem.entranceWindowPercent + '%'
              this.infoWindow.marginLeft = '-' + anchorItem.entranceWindowPercent / 2 + '%'
              this.infoWindow.marginTop = '-' + anchorItem.entranceWindowPercent / 2 + '%'
            } else {
              this.infoWindow.width = anchorItem.entranceWindowWidth + 'px'
              this.infoWindow.height = anchorItem.entranceWindowHeight + 'px'
              this.infoWindow.marginLeft = '-' + anchorItem.entranceWindowWidth / 2 + 'px'
              this.infoWindow.marginTop = '-' + anchorItem.entranceWindowHeight / 2 + 'px'
            }
            this.infoWindow.url = url
          }
        })
        return marker
//        if (!this.clusterSet[list[0].anchorTypeId]) return
//        this.clusterSet[list[0].anchorTypeId].addMarkers(tmpMarkers)
      },
      /**
       * 按照相应的比例尺显示相应锚点类型的锚点
       */
      hidePoint(anchorTypeItem, all) {
//        console.log('this.map.getAllOverlays(),',this.clusterSet,'!@!!', typeId, this.currentMarkerIdList, 'this.tmpList', this.tmpList)
        let tmpRemoveMarkers = []
        if (!this.clusterSet[anchorTypeItem.anchorTypeId]) return
        if(all) { // 单个类别 显示隐藏
          this.clusterSet[anchorTypeItem.anchorTypeId].getMarkers().forEach(item=>{
            this.currentMarkerIdList.splice(this.currentMarkerIdList.indexOf(item.getExtData().anchorId), 1)
          })
          this.clusterSet[anchorTypeItem.anchorTypeId].removeMarkers(this.clusterSet[anchorTypeItem.anchorTypeId].getMarkers())
          return
        }
        this.clusterSet[anchorTypeItem.anchorTypeId].getMarkers().forEach((item, index) => {
          let tag = anchorTypeItem.active && ((anchorTypeItem.checkedScale.indexOf(item.getExtData().mapScale) > -1 ) || (parseInt(item.getExtData().mapScale) >=
            parseInt(this.currentMapScale)))
          if (!tag) {
            tmpRemoveMarkers.push(item)
            this.currentMarkerIdList.splice(this.currentMarkerIdList.indexOf(item.getExtData().anchorId), 1)
          }
        })
        this.clusterSet[anchorTypeItem.anchorTypeId].removeMarkers(tmpRemoveMarkers)
      },
      /**
       * 关闭信息框
       */
      closeInfoWindow () {
        document.getElementById('infoWindow').style.display = 'none'
        this.infoWindow.url = ''
      },
      /**
       * 切换选择区域锚点
       */
      togglePay () {
        this.isChoose = !this.isChoose
        if (this.isChoose === true) {
          document.getElementById('infoWindow').style.display = 'none'
          this.infoWindow.url = ''
          this.map.plugin(["AMap.MouseTool"], () => {
            this.mouseTool = new AMap.MouseTool(this.map)
            this.isMouse = true
            this.mouseTool.rectangle({//通过rectOptions更改拉框放大时鼠标绘制的矩形框样式
              strokeColor: '#fff',
              strokeWeight: 3,
              strokeOpacity: 1,
              strokeDasharray: [10, 10],
              strokeStyle: 'dashed',
              fillColor: '#fff',
              fillOpacity: 0.01,
              zIndex: 10,
            })
            this.mouseTool.on("draw", (e) => {
              console.log('ddddd', e, e.obj.getBounds())
              this.currentRect = e.obj
              let overlays = this.map.getAllOverlays()
              console.log(this.currentRect.contains(overlays[0].getPosition()), 'contains', overlays[0].getPosition())
              let c = this.currentRect.contains(overlays[0].getPosition())
              let area = document.getElementById('area')
              c ? area.style.display = 'block' : area.style.display = 'none'
            })
            this.map.on('mousedown', (e) => {
              if (this.currentRect) this.currentRect.setMap(null)
              console.log(e, 'mousedown')
            })
          })
        } else {
          this.mouseTool.close(true)
          this.isMouse = false
        }
      },
      /**
       * 切换中心和3D
       * @param item
       * @param index
       */
      toggleType (item, index) {//切换地图中心和2D,3D切换
        if (this.isMouse === true) {//去除框选区域功能样式
          this.mouseTool.close(true)
          this.isChoose = false
        }
        let reg = document.getElementById('central-region'),
          d2 = document.getElementById('container'),
          d3 = document.getElementById('container3D')
        switch (item.type) {
          case 'center'://显示设置中心区域
            if (!item.active) {
              this.$set(item, 'active', true)
              reg.style.display = 'block'
            } else {
              this.$set(item, 'active', false) //为item添加不存在的属性
              reg.style.display = 'none'
            }
            break
          case '3D'://2D,3D切换
            if (!item.active) {
              this.map = this.gdMap3D
              this.menuList = this.menu3dList
              this.clusterSet = this.clusterSet3D
              this.tmpList = this.menu3dList
              this.checkAllObj = this.checkAllObj3D
              this.current2DMarkerIdList = this.currentMarkerIdList
              this.currentMarkerIdList = this.current3DMarkerIdList
              this.ChooseAllType = '3D'
              this.oldLngLat = this.oldLngLat3D
              this.iconList = this.iconList3D
              this.$refs.anchorScroll.style.marginLeft = 0
              this.$set(item, 'active', true)
              d2.style.display = 'none'
              d3.style.display = 'block'
            } else {
              this.map = this.gdMap
              this.clusterSet = this.clusterSet2D
              this.menuList = this.menu2dList
              this.tmpList = this.menu2dList
              this.checkAllObj = this.checkAllObj2D
              this.current3DMarkerIdList = this.currentMarkerIdList
              this.currentMarkerIdList = this.current2DMarkerIdList
              this.ChooseAllType = '2D'
              this.oldLngLat = this.oldLngLat2D
              this.iconList = this.iconList2D
              this.$refs.anchorScroll.style.marginLeft = 0
              this.$set(item, 'active', false) //为item添加不存在的属性
              d2.style.display = 'block'
              d3.style.display = 'none'
            }
            this.getNowPoint(this.map)
            this.marker.setMap(this.map)
            break
        }
      },
      /**
       * 点击选择地图中心
       */
      setMapCenter (item, i) {
        this.checkAllObj.centerChoose = i
        this.centerMarker.setMap(null)
        this.centerMarker = new AMap.Marker()
        if (item.mapCenterLocationType === '01') { //根据经纬度获取中心点
          let center = [parseFloat(item.longitude), parseFloat(item.latitude)]
          this.map.setZoomAndCenter(14, center)
          this.centerMarker.setMap(this.map)
        } else { //根据城市名获取中心点
          this.map.setCity(item.cityName)
          this.map.setZoom(14)
          this.centerMarker.setMap(this.map)
        }
        let extData = {type: 'center'}
        this.centerMarker.setExtData(extData) //给标记点添加type属性
        this.getNowPoint(this.map)
      },
      /**
       * 全选、不全选、单选
       * @param list
       * @param item
       * @param type
       */
      toggleChoose (list, item, type) {
        if (this.isMouse === true) {//去除框选区域功能样式
          this.mouseTool.close(true)
          this.isChoose = false
        }
        switch (type) {
          case 'all'://全选、不全选
            this.tmpList = list
            this.checkAllObj.checked = !this.checkAllObj.checked
            if (this.checkAllObj.checked) {//全选
              for (let i = 0; i < list.length; i++) {
                this.$set(list[i], 'active', true)
              }
              this.oldLngLat = null
              this.getNowPoint(this.map)
            } else {//不全选
              for (let i = 0; i < list.length; i++) {
                this.$set(list[i], 'active', false)
                this.hidePoint(list[i], true)
              }
            }
            break;
          case 'single'://单选
            this.tmpList = list
            if (item.active) {
              this.$set(item, 'active', false)
              console.time()
              this.hidePoint(item, true)
              this.checkAllObj.checked = false
            } else {
              this.$set(item, 'active', true)
              this.getNowPoint(this.map, item)
            }
            let count = 0
            for (let i = 0; i < list.length; i++) {
              if (list[i].active === true) {
                count++
              }
            }
            this.checkAllObj.checked = list.length === count
            break;
        }
      },
      /**
       * 图标滚动
       * @param LAndR
       */
      iconGo(LAndR) {
        let zooms = document.getElementsByClassName('zoom')
        let hideTxts = document.getElementsByClassName('hide')
        for (let i = 0; i < zooms.length; i++) {
          zooms[i].style.display = 'none'
          zooms[i].style.height = '0'
          hideTxts[i].className = 'hide arrow-s'
        }
        console.log(this.$refs.anchorOverflow.clientWidth, 'ddd', this.$refs.anchorScroll.style.width, 'width',
          this.$refs.anchorOverflow.clientWidth)
        this.anchorScroll = this.$refs.anchorScroll
        let overflowWidth = parseInt(this.$refs.anchorOverflow.clientWidth)
        let scrollWidth = parseInt(this.anchorScroll.style.width)
        let scrollLeft = parseInt(this.anchorScroll.style.marginLeft) || 0
        this.anchorScroll.style.marginLeft = this.anchorScroll.style.marginLeft || '0px'
        if (LAndR === 'L' && parseInt(this.anchorScroll.style.marginLeft) === 0) {
          return
        }
        if (LAndR === 'R' && parseInt(this.anchorScroll.style.marginLeft) <= -(parseInt(this.anchorScroll.style.width) - parseInt(this.$refs.anchorOverflow.clientWidth))) {
          return
        }

        if (LAndR === 'L') {
          if (-scrollLeft < overflowWidth) {
            this.goPix = -scrollLeft
          } else {
            this.goPix = overflowWidth
          }
        } else {
          if ((scrollWidth + scrollLeft - overflowWidth) < overflowWidth) {
            this.goPix = scrollWidth + scrollLeft - overflowWidth - 10
          } else {
            this.goPix = overflowWidth
          }
        }
        if (this.goPix < 39) {
          return
        }
        this.goPix = this.goPix / 2
        this.goTime && clearInterval(this.goTime)
        this.goTime = setInterval(() => {
          if (this.goPix > 0) {
            this.goPix--
          } else {
            clearInterval(this.goTime)
          }
          if (LAndR === 'L') {
            this.anchorScroll.style.marginLeft = parseInt(parseInt(this.anchorScroll.style.marginLeft) + 2) + 'px'
          } else {
            this.anchorScroll.style.marginLeft = parseInt(parseInt(this.anchorScroll.style.marginLeft) - 2) + 'px'
          }
        }, 0)
      },
      // 切换框选显示列表区域类型列表
      handleClick(tab, event) {
        console.log(tab, event);
      },
      /**
       * 单个类型比例尺全选
       * @param val
       */
      handleCheckAllChange(val) {
        let tmpScaleList = []
        for (let i = 0; i < val.scaleList.length; i++) {
          tmpScaleList.push(val.scaleList[i].detailCode)
        }
        val.checkedScale = val.checkAll ? tmpScaleList : []
        let checkCount = 0
        this.tmpList.forEach((item, index) => {
          if (item.checkAll === true) {
            checkCount++
          }
        })
        this.checkAllObj.checkScale = this.tmpList.length === checkCount
        this.checkAllObj.scaleArr = this.checkAllObj.checkScale ? tmpScaleList : []
        val.active && (val.checkAll ? this.getNowPoint(this.map, val) : this.hidePoint(val))
      },
      /**
       * 单个类型比例尺单选
       * @param value
       */
      handleCheckedChange(value) {
        let checkedCount = value.checkedScale.length
        let oldScaleLen = value.oldScaleLen || 0
        value.checkAll = checkedCount === this.scaleList.length
        let checkCount = 0
        this.tmpList.forEach((item, index) => {
          if (item.checkAll === true) {
            checkCount++
          }
        })
        this.checkAllObj.checkScale = this.tmpList.length === checkCount
        this.checkAllObj.scaleArr = this.checkAllObj.checkScale ? value.checkedScale : []
        checkedCount > oldScaleLen ? this.getNowPoint(this.map, value) : this.hidePoint(value)
        value.oldScaleLen = checkedCount
      },
      /**
       * 全部类型比例尺全选
       * @param val
       */
      checkAllChange(val) {
        let tmpScaleList = []
        for (let i = 0; i < this.scaleList.length; i++) {
          tmpScaleList.push(this.scaleList[i].detailCode)
        }
        this.checkAllObj.checkScale = val
        this.checkAllObj.scaleArr = val ? tmpScaleList : []
        this.tmpList.forEach((item, index) => {
          item.checkedScale = val ? tmpScaleList : []
          item.checkAll = val
        })
        this.oldLngLat = null
        val ? this.getNowPoint(this.map) : this.menuList.forEach(v => {
          this.hidePoint(v)
        })
      },
      /**
       * 全部类型比例尺单选
       * @param value
       */
      checkedChange(value) {
        let checkedCount = value.length
        let oldScaleLen = value.oldScaleLen || 0
        this.checkAllObj.checkScale = checkedCount === this.scaleList.length
        this.checkAllObj.scaleArr = value
        this.tmpList.forEach((item, index) => {
          item.checkedScale = value
          let checkedC = item.checkedScale.length
          item.checkAll = checkedC === this.scaleList.length
        })
        this.oldLngLat = null
        checkedCount > oldScaleLen ? this.getNowPoint(this.map) : this.menuList.forEach(v => {
          this.hidePoint(v)
        })
        value.oldScaleLen = checkedCount
      },
      /**
       * 单个显示或者隐藏锚点名称
       */
      showName (val) {
        let count = 0
        this.tmpList.forEach((item, index) => {
          if (item.checkName === true) {
            count++
          }
        })
        this.checkAllObj.checkName = this.tmpList.length === count
        this.clusterSet[val.anchorTypeId].getMarkers().forEach((item, index) => {
          let labelName = val.checkName ? (item.getExtData().anchorName || '未命名') : ''
          item.setLabel({content: labelName})
        })
      },
      /**
       * 全部的显示名称
       * @param val
       */
      showAllName(val) {
        this.checkAllObj.checkName = val
        this.tmpList.forEach((item) => {
          item.checkName = val
          this.clusterSet[item.anchorTypeId].getMarkers().forEach((v) => {
            let labelName = val ? (v.getExtData().anchorName || '未命名') : ''
            v.setLabel({content: labelName})
          })
        })
      },
      pop(id, txt) {
        let zoX = document.getElementById(id).getBoundingClientRect().left
        let zoY = document.getElementById(id).getBoundingClientRect().top
        let zoom = document.getElementById(id).childNodes[0]
        txt = document.getElementById(txt)
        let zooms = document.getElementsByClassName('zoom')
        let hideTxts = document.getElementsByClassName('hide')
        if (zoom.style.height === '0px') {
          for (let i = 0; i < zooms.length; i++) {
            zooms[i].style.display = 'none'
            zooms[i].style.height = '0'
            hideTxts[i].className = 'hide arrow-s'
          }
          zoom.style.display = 'block'
          zoom.style.height = 'auto'
          zoom.style.left = zoX + 'px'
          zoom.style.top = (zoY - 35) + 'px'
          txt.className = 'hide arrow-x'
        } else {
          zoom.style.display = 'none'
          zoom.style.height = '0px'
          txt.className = 'hide arrow-s'
        }
      }
    }
  }
</script>

<style lang="less">
  .main {
    #container, #container3D {
      width: 100%;
      height: 100%;
      margin: 0;
      font-size: 13px;
    }
    /*锚点栏*/
    .anchor-box {
      position: fixed;
      left: 20px;
      bottom: 20px;
      z-index: 999;
      max-width: 80%;
      &-left {
        float: left;
        margin-right: 20px;
      }
      &-right {
        display: block;
        height: 83px;
        float: left;
        max-width: 80%;
        .anchor-overflow {
          position: absolute;
          left: 140px;
          right: 40px;
          bottom: 10px;
          overflow: hidden;
          height: 90px;
          .anchor-scroll {
            width: 300px;
            height: 86px;
          }
        }
        .leftIconGo {
          float: left;
          width: 28px;
          height: 80px;
          background: url('../assets/images/mapIcon/leftIcon.png') left center no-repeat;
          background-size: 9px 19px;
          cursor: pointer;
        }
        .rightIconGo {
          float: right;
          width: 28px;
          height: 80px;
          background: url('../assets/images/mapIcon/rightIcon.png') right center no-repeat;
          background-size: 9px 19px;
          cursor: pointer;
        }
      }
    }
    .anchor {
      position: relative;
      padding: 15px;
      background: #00101d;
      background-image: linear-gradient(#031b28 1px, transparent 0),
      linear-gradient(90deg, #031b28 1px, transparent 0),
      linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
      linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
      background-size: 20px 20px;
      border: 1px solid !important;
      border-image: -webkit-linear-gradient(#00ffff, #3f4249, #00ffff) 30 30 !important;
      border-image: -moz-linear-gradient(#00ffff, #3f4249, #00ffff) 30 30 !important;
      border-image: linear-gradient(#00ffff, #3f4249, #00ffff) 30 30 !important;
      box-shadow: -3px 3px 5px #222b2b;
      .sj {
        position: absolute;
        height: 0;
        width: 0;
        overflow: hidden;
        border-bottom: solid 18px #00101d;
        border-right: solid 18px #053c63;
        top: -1px;
        right: -1px;
      }
    }
    .its {
      padding: 12px 7.5px !important;
    }
    .anchor .anchor-item,
    .anchor .anchor-item:visited {
      text-decoration: none;
      float: left;
      color: #fff;
      display: block;
      background-color: rgba(64, 237, 254, .12);
      padding: 25px 7.5px 5px;
      margin: 1px 10px 0 1px;
      position: relative;
      border-top: 2px solid #ffffff;
      font-size: 16px;
      height: 55px;
      cursor: pointer;
      text-align: center;
      &:last-child {
        margin-right: 0;
      }
    }
    .anchor .active {
      background-color: rgba(109, 133, 255, 0.51);
    }
    .anchor .anchor-item .corner {
      position: absolute;
      height: 0;
      width: 0;
      overflow: hidden;
      border-top: solid 10px rgba(8, 43, 56, .1);
      border-right: solid 10px #00101d;
      bottom: 0;
      right: 0;
    }
    .anchor .anchor-item .name {
      line-height: 50px;
      img {
        vertical-align: middle;
      }
    }
    .total{
      line-height:37px;
      font-size: 16px;
    }
    .anchor-zone {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 999;
      .anchor-item {
        float: none;
      }
    }
    .arrow-s{
      height: 18px;
      background: url("../assets/images/mapIcon/ssj.png") no-repeat center;
      background-size: 15px;
    }
    .arrow-x{
      height: 18px;
      background: url("../assets/images/mapIcon/xsj.png") no-repeat center;
      background-size: 15px;
    }
    .anchor-item {
      width: 75px;
      .names {
        font-size: 14px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .hide {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        /*background-color: rgba(255, 255, 255, 0.6);*/
        background-color: #4d66ac;
      }
      .zoom {
        display: none;
        position: fixed;
        padding: 5px 0;
        color: #00A0A3;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        width: 105px;
        font-size: 14px;
        line-height: 25px;
        border: 1px solid #00A0A3;
        background-color: #031A38;
        -webkit-box-shadow: #00A0A3 0 0 11px;
        box-shadow: #00A0A3 0 0 11px;
        text-align: left;
        &:after {
          position: absolute;
          display: block;
          content: '';
          height: 0;
          width: 0;
          border: 8px solid;
          border-color: #031A38 transparent transparent transparent;
          left: 30%;
          /*margin-left: -8px;*/
          top: 100%;
        }
        .el-radio + .el-radio {
          margin-left: 0;
        }
        .el-checkbox + .el-checkbox {
          margin-left: 0;
        }
        .el-checkbox {
          padding: 4px 12px;
        }
        .el-radio {
          padding: 5px 0;
          color: #fff;
        }
        .el-checkbox__label {
          color: #fff;
        }
      }
      /*&:hover .zoom {*/
      /*opacity: 1;*/
      /*transform: translateY(-100%);*/
      /*-webkit-transform: translateY(-100%);*/
      /*}*/
      /*&:last-child {*/
      /*.zoom {*/
      /*margin-left: -80%;*/
      /*&:after {*/
      /*left: 60%;*/
      /*}*/
      /*}*/
      /*&:hover .zoom {*/
      /*opacity: 1;*/
      /*transform: translateY(-100%);*/
      /*-webkit-transform: translateY(-100%);*/
      /*}*/
      /*}*/
    }
    .anchor-items {
      width: 100%;
      position: relative;
      bottom: 20px;
      left: 0;
      transition: all 1s ease;

      .central-region {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 15px;
        color: #fff;
        display: none;
        .c-main {
          position: relative;
          background-color: rgba(0, 22, 54, .74);
          padding: 10px 15px;
          border: 1px solid #00f6ff;
          &:after {
            content: '';
            width: 10px;
            height: 10px;
            position: absolute;
            bottom: -6px;
            left: 30px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            background-color: rgba(0, 22, 54, 0.74);
            border: 1px #00f6ff;
            border-style: none solid solid none;
          }
          .center-list {
            position: relative;
            margin-right: 6px;
            display: inline-block;
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid #68c2dc;
            background: linear-gradient(135deg, #12688a 50%, #0b4f73 27%, #0c5a7d);
            /* 标准的语法（必须放在最后） */
            background: -webkit-linear-gradient(135deg, #12688a 50%, #0b4f73 27%, #0c5a7d);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(135deg, #12688a 50%, #0b4f73 27%, #0c5a7d);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(135deg, #12688a 50%, #0b4f73 27%, #0c5a7d);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(135deg, #12688a 50%, #0b4f73 27%, #0c5a7d);
            /* 标准的语法（必须放在最后） */
            &:after {
              position: absolute;
              content: '';
              height: 0;
              width: 0;
              overflow: hidden;
              border-bottom: solid 10px rgba(2, 32, 65, 0);
              border-right: solid 10px rgb(2, 32, 65);
              top: -1px;
              right: -1px;
            }
            &:before {
              position: absolute;
              content: '';
              height: 0;
              width: 0;
              overflow: hidden;
              border-right: solid 10px rgba(2, 32, 65, 0);
              border-bottom: solid 10px #022041;
              bottom: -1px;
              left: -1px;
            }
          }
          .on {
            background: linear-gradient(135deg, #566ec1 50%, #0b2f9c 27%, #556dc2);
            /* 标准的语法（必须放在最后） */
            background: -webkit-linear-gradient(135deg, #566ec1 50%, #0b2f9c 27%, #556dc2);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(135deg, #566ec1 50%, #0b2f9c 27%, #556dc2);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(135deg, #566ec1 50%, #0b2f9c 27%, #556dc2);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(135deg, #566ec1 50%, #0b2f9c 27%, #556dc2);
          }
        }
      }
    }

    /*框选列表显示区域*/
    .area {
      display: none;
      position: fixed;
      right: 10px;
      top: 50px;
      z-index: 999;
      padding: 20px;
      border-radius: 4px;
      background: #00101d;
      border: 1px solid !important;
      border-image: -webkit-linear-gradient(#00ffff, #3f4249, #00ffff) 30 30 !important;
      border-image: -moz-linear-gradient(#00ffff, #3f4249, #00ffff) 30 30 !important;
      border-image: linear-gradient(#00ffff, #3f4249, #00ffff) 30 30 !important;
      box-shadow: -3px 3px 5px #222b2b;
      max-width: 360px;
      .el-tabs__item {
        color: #fff;
      }
      .el-tabs__nav-next, .el-tabs__nav-prev {
        font-size: 14px;
        color: #fff;
        line-height: 40px;
      }
      .el-tabs__nav-prev {
        left: -8px !important;
      }

      .areaList {
        color: #fff;
        &-item {
          padding: 10px;
          border-bottom: 1px solid rgba(238, 238, 238, 0.6);
          display: flex;
          .img {
            width: 100px;
            height: 80px;
            overflow: hidden;
            margin-right: 10px;
            img {
              width: 100%;
              float: left;
            }
          }
          .content {
            float: left;
            h1 {
              padding-bottom: 5px;
              font-size: 18px;
            }
            p {
              padding-bottom: 5px;
              color: #eee;
            }
            .intro {
              font-size: 15px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
      .areaList .areaList-item:last-child {
        border-bottom: none;
      }
    }

    .amap-marker-label {
      min-width: 60px;
      word-break: break-all;
      font-size: 13px;
      line-height: 20px;
      text-align: center;
      /* height: 18px; */
      color: #FFF;
      background: rgba(255, 255, 255, 0);
      border: none;
      padding: 2px 4px;
    }
    /*登录关联窗口*/
    .infoWindow {
      display: none;
      position: fixed;
      z-index: 999;
      top: 50%;
      left: 50%;
      padding: 20px;
      border-radius: 4px;
      background: #00101d;
      border: 1px solid !important;
      border-image: -webkit-linear-gradient(#00ffff, #3f4249, #00ffff) 30 30 !important;
      border-image: -moz-linear-gradient(#00ffff, #3f4249, #00ffff) 30 30 !important;
      border-image: linear-gradient(#00ffff, #3f4249, #00ffff) 30 30 !important;
      box-shadow: -3px 3px 5px #222b2b;
      &-content {
        width: 100%;
        height: 100%;
      }
      &-close {
        position: absolute;
        cursor: pointer;
        right: -20px;
        top: -20px;
        color: #fff;
        background: #000f1e;
        border: 1px solid #00ffff;
        box-shadow: -3px 3px 5px #222b2b;
        width: 40px;
        height: 40px;
        text-align: center;
        vertical-align: middle;
        line-height: 40px;
        font-size: 16px;
        border-radius: 50%;
      }
    }
  }

</style>
